<template>
  <div class="login" :class="[setTheme == 1 ? 'blue' : 'red']">
    <div class="login-form">
      <h3 class="title">{{ $t("langName.langName1") }}</h3>
      <el-form
        :model="userForm"
        :rules="loginRules"
        ref="ruleForm"
        class="mt-80"
        :label-width="languageType == 1 ? '170px' : '140px'"
      >
        <!-- 账号 -->
        <el-form-item :label="$t('langName.langName11')" prop="nickname">
          <el-input
            v-model="userForm.nickname"
            :placeholder="$t('langName.langName16')"
          >
            <i slot="prefix" class="el-icon-s-custom img-size"></i
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item :label="$t('langName.langName12')" prop="password">
          <el-input
            v-model="userForm.password"
            type="password"
            :placeholder="$t('langName.langName17')"
            :show-password="true"
          >
            <i slot="prefix" class="el-icon-unlock img-size"></i>
          </el-input>
        </el-form-item>
        <!-- 忘记密码+注册 -->
        <div
          class="d-flex registerStyle"
          :style="{ marginRight: languageType == 1 ? '50px' : '85px' }"
        >
          <div @click="handleForgotPassword">
            {{ $t("langName.langName59") }}
          </div>
          <div @click="handleToRegister" class="ml-20">
            {{ $t("langName.langName37") }}
          </div>
        </div>
        <!-- 登录按钮 -->
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          class="submitBtn"
          @click="handleLogin('ruleForm')"
          >{{ $t("langName.langName7") }}</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { postLogin } from "@/api/collect";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      userForm: {
        // 表单数据
        nickname: "",
        password: "",
      },
      loginRules: {
        // 验证规则
        nickname: [
          {
            required: true,
            message: this.$t("langName.langName16"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("langName.langName17"),
            trigger: "blur",
          },
        ],
      },
      setTheme: "",
      languageType: Cookies.get("lang"),
    };
  },
  created() {
    // 切换主题风格
    this.setTheme = localStorage.getItem("setTheme")
      ? localStorage.getItem("setTheme")
      : "1";
  },

  methods: {
    // 跳转到注册界面
    handleToRegister() {
      this.$router.push({
        path: "/register",
      });
    },

    // 跳转到忘记密码界面
    handleForgotPassword() {
      this.$router.push({
        name: "forgotPassword",
        params: {
          userName: this.userForm.nickname,
        },
      });
    },

    // 登录
    async handleLogin(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { status, data, message } = await postLogin(this.userForm);
          if (status == 200) {
            localStorage.setItem("userId", data.userid);
            localStorage.setItem("avatar", data.avatar);
            this.$router.push({
              path: "/",
            });
          } else {
            this.$message({
              message: message,
              type: "error",
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// @import "../assets/css/login.css";

.registerStyle {
  float: right;
  font-size: 12px;
  color: #cccc;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
}
.registerStyle div:hover {
  color: #0156ff;
}
.login.blue {
    width: 100%;
    height: 100%;
    background: #0156ff;
    color: #333;
    overflow: hidden;
  }
  .login.red {
    width: 100%;
    height: 100%;
    background: #f78989;
    color: #333;
    overflow: hidden;
  }
 
  .login-form {
    position: relative;
    width: 30vw;
    margin: auto;
    margin-top: 10vw;
    background: #fff;
    border-radius: 20px;
    padding: 30px 0;
    color: #333;
    height: 400px;
    padding-bottom: 80px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #333;
    font-size: 1.8vw;
  }
  .el-button--primary,.el-button--danger {
    font-size: 1vw;
  }
  .submitBtn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 25vw !important;
  }


  ::v-deep .el-input {
    width: 18vw;
  }
  ::v-deep .el-upload-list--picture .el-upload-list__item-name {
    display: none;
  }
  ::v-deep .el-upload-list--picture .el-upload-list__item {
    height: 60px;
    padding: 0;
    border-radius: 50%;
  }
  ::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
    margin-left: 0;
  }
  .close {
    float: right;
    margin-right:30px;
    margin-top:-10px;
    cursor: pointer;
  }

  ::v-deep .el-form-item__content {
    margin-bottom: 20px;
  }
  ::v-deep .el-form-item__label {
    font-size: 16px;
  }



::v-deep .el-upload {
  position: absolute;
  left: 100px;
  top: 10px;
}



::v-deep .el-form-item__content {
  display: flex;
}



::v-deep .el-upload-list {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 60px;
  height: 60px;
}


::v-deep
.el-form-item.is-required:not(.is-no-asterisk)
.el-form-item__label-wrap
> .el-form-item__label:before,
::v-deep
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before {
content: "";
}
</style>
